<template>
  <div>
    <mt-header title="我的收藏">
      <mt-button icon="back" slot="left" @click="gobackIDcard">返回</mt-button>
    </mt-header>
    <tab :line-width="2" animate  active-color="#fc378c">
      <tab-item selected @on-item-click="onItemClick(PhoneBind)">手机绑定</tab-item>
      <tab-item @on-item-click="onItemClick(EmailBind)">邮箱绑定</tab-item>
    </tab>

    <!--子组件,is 特性动态绑定子组件,keep-alive将切换出去的组件保留在内存中 -->
    <prince :is="currentView" keep-alive></prince>


  </div>

</template>

<script>
  import {
    Tab,
    TabItem,
    ButtonTab,
    ButtonTabItem,
    LoadMore,
    Divider,
    Checklist
  } from "vux";
  import PhoneBind from './PhoneBind';
  import EmailBind from './EmailBind';
  import _ from 'lodash';
  import wx from 'weixin-js-sdk'

 

  export default {
    components: {
      Tab,
      TabItem,
      ButtonTab,
      ButtonTabItem,
      LoadMore,
      Divider,
      Checklist,
      PhoneBind,
      EmailBind,
      
    },

    methods: {
      //切换Tab
      onItemClick(tabItem) {
        console.log('tabItem', tabItem);
        this.currentView = tabItem;
      },
    },
    data() {
      return {
        PhoneBind: 'PhoneBind',
        EmailBind: 'EmailBind',
        currentView: 'PhoneBind',
        stlle: 'PhoneBind',
      };
    },

    mounted() {
      let windowWidth = document.documentElement.clientWidth; //获取屏幕高度
      if (windowWidth > 768) {
        //这里根据自己的实际情况设置容器的高度
        this.wrapperHeight = document.documentElement.clientHeight - 130;
      } else {
        this.wrapperHeight = document.documentElement.clientHeight - 90;
      }



    }
  };

</script>
